<template>
    <div class="container">
        <div>
        <div class="navbar">
            <div class="navbar-item" @click="change(1)"><router-link to="/zhwg/guxinDemo/">地图查看</router-link></div>
            <div class="navbar-item" @click="change(2)"><router-link to="/zhwg/guxinDemo/guxinPeople">人口查看</router-link></div>
            <div class="navbar-item" @click="change(3)"><router-link to="/zhwg/guxinDemo/guxinJob">就业情况查看</router-link></div>
        </div>
        <router-view />
    </div>
    </div>

</template>
<script>
export default{
    name:"guxinDemo",
    data(){
        return {
            
        }
    },
    methods:{
        change(x){
            console.log(x)
        }
    },
}
</script>
<style scoped>
.container{
    width: 800px;
    margin: 0 auto;
    padding-top: 3%;
    overflow: auto;
}
.navbar{
    width: 800px;
    font-size: 2rem;
    display: flex;
    justify-content: space-around;
}

.navbar-item{
    width: 30%;
}
</style>